<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shopping</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="store">
        <div class="store__nav">
            <div class="store-nav__logo">
                <img src="./shoppingLogo.png" alt="">
            </div>
            <div class="store__nav__list">
                <ul class="list">
                    <li class="list_item">首页</li>
                    <li class="list_item">商品分类</li>
                    <li class="list_item">订单中心</li>
                    <li class="list_item">购物车</li>
                    <li class="list_item">个人中心</li>
                </ul>
            </div>
            <div class="store__nav__login">
                <button class="login button--primary">登录</button>
                <button class="register button--primary">注册</button>
            </div>
        </div>
        <div class="store__search">
            <div class="search-box">
                <div class="search-box--input">
                    <img src="./search.png" alt="" class="img">
                    <input type="text" class="search-input" placeholder="搜索商品">
                    <button class="search-button">搜索</button>
                </div>
                <p class="search-hot">
                    热门搜索:
                    <a href="#">智能手机</a>
                    <a href="#">笔记本电脑</a>
                    <a href="#">平板电脑</a>
                    <a href="#">运动鞋</a>
                    <a href="#">护肤套装</a>
                </p>
            </div>
        </div>
        <div class="store__category">
            <div class="category-title">
                <ul class="category-title_list">
                    <li class="list-item">全部分类</li>
                    <li class="list-item">服装</li>
                    <li class="list-item">服装</li>
                    <li class="list-item">家居</li>
                    <li class="list-item">美妆</li>
                    <li class="list-item">食品</li>
                    <li class="list-item">母婴</li>
                    <li class="list-item">运动</li>
                </ul>
            </div>
            <div class="category-content">
                <div class="content-banner">
                    <img src="./banner.png" alt="">
                </div>
                <p class="content-title">
                    特色商品推荐
                </p>
                <ul class="content-list">
                    <li class="list-goods">
                        <img src="./erji.png" alt="">
                        <p>高端无线耳机</p>
                        <p class="price">¥1299</p>

                    </li>
                    <li class="list-goods">
                        <img src="./watch.png" alt="">
                        <p>智能手表</p>
                        <p class="price">¥899</p>

                    </li>
                    <li class="list-goods">
                        <img src="./qianbao.png" alt="">
                        <p>真皮钱包</p>
                        <p class="price">¥399</p>
                    </li>
                    <li class="list-goods">
                        <img src="./bag.png" alt="">
                        <p>时尚双肩包</p>
                        <p class="price">¥599</p>
                    </li>
                </ul>
                <div class="content-miaosha">
                    <div class="content-miaosha__title">
                        <div class="title__left">
                            限时秒杀
                        </div>
                        <div class="title__right">
                            <div class="right__content">距结束还剩：</div>
                            <div class="time">02</div>
                            <div class="time__line">:</div>
                            <div class="time">45</div>
                            <div class="time__line">:</div>
                            <div class="time">30</div>
                        </div>
                    </div>
                    <ul class="content-miaosha__list">
                        <li class="miaosha__item">
                            <img src="./phone.png" alt="">
                            <p class="item__nowprice">¥2999</p>
                            <p class="item__oldprice">¥3999</p>
                        </li>
                        <li class="miaosha__item">
                            <img src="./audio.png" alt="">
                            <p class="item__nowprice">¥499</p>
                            <p class="item__oldprice">¥699</p>
                        </li>
                        <li class="miaosha__item">
                            <img src="./sunglasses.png" alt="">
                            <p class="item__nowprice">¥299</p>
                            <p class="item__oldprice">¥499</p>
                        </li>
                        <li class="miaosha__item">
                            <img src="./watchframe.png" alt="">
                            <p class="item__nowprice">¥199</p>
                            <p class="item__oldprice">¥299</p>
                        </li>
                        <li class="miaosha__item">
                            <img src="./powerbank.png" alt="">
                            <p class="item__nowprice">¥159</p>
                            <p class="item__oldprice">¥259</p> 
                        </li>
                        <li class="miaosha__item">
                            <img src="./pan.png" alt="">
                            <p class="item__nowprice">¥99</p>
                            <p class="item__oldprice">¥199</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="store__foot">
            <div class="foot__content">
                <div class="content__message">
                    <div class="message__about">
                        <p class="about__title">关于我们</p>
                        <p class="about__content">公司介绍</p>
                        <p class="about__content">招贤纳士</p>
                        <p class="about__content">联系我们</p>
                    </div>
                    <div class="message__help">
                        <p class="help__title">帮助中心</p>
                        <p class="help__content">购物指南</p>
                        <p class="help__content">支付方式</p>
                        <p class="help__content">配送说明</p>
                    </div>
                    <div class="message__aftersales">
                        <p class="aftersales__title">售后服务</p>
                        <p class="aftersales__content">退货政策</p>
                        <p class="aftersales__content">退货流程</p>
                        <p class="aftersales__content">售后政策</p>
                    </div>
                    <div class="message__contact">
                        <p class="contact__title">客服热线</p>
                        <p class="contact__phone">400-123-4567</p>
                        <p class="contact__time">周一至周日 9:00-22:00</p>
                    </div>
                </div>
                <div class="content__version">
                    <div class="version__inline"></div>
                    <div class="version__content">© 2024 logo商城. 保留所有权利. ICP备案号：京ICP备12345678号-1</div>
                </div>
            </div>
            <div class="foot__sider">
                <div class="sider__icon">
                    <img src="./cart.png" alt="">
                </div>
                <div class="sider__icon">
                    <img src="./earphone.png" alt="">
                </div>
                <div class="sider__icon">
                    <img src="./back.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
</html>